<template>
    <el-dialog v-model="dialogVisible" title="Tips" width="500" :before-close="handleClose">
        <el-form :inline="true" :model="fromData" class="demo-form-inline">
            <el-form-item label="店铺名称：">
                <el-input v-model="fromData.shopName" placeholder="店铺名称" clearable />
            </el-form-item>
            <el-form-item label="店铺地址：">
                <el-input v-model="fromData.shopDescription" placeholder="店铺名称" clearable />
            </el-form-item>
            <el-form-item label="店铺地址:">
                <el-input v-model="fromData.shopAddress" placeholder="店铺名称" clearable />
            </el-form-item>
            <el-form-item label="店铺分类:">
                <el-input v-model="fromData.shopType" placeholder="店铺名称" clearable />
            </el-form-item>

        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogVisible = false">Cancel</el-button>
                <el-button type="primary" @click="handOk">
                    确定
                </el-button>
            </div>
        </template>
    </el-dialog>
    <el-button @click="handAdd">新增</el-button>
    <el-form :inline="true" :model="searchData" class="demo-form-inline">
        <el-form-item label="店铺名称">
            <el-input v-model="searchData.searchValue" placeholder="店铺名称" clearable />
        </el-form-item>

        <el-select style="width: 200px;height: 50px;" v-model="searchData.type" placeholder="类型">
            <el-option v-for="(item, index) in typeList" :key="index" :label="item" :value="item" />
        </el-select>

        <el-button @click="getList">搜索</el-button>
        <el-button @click="Claer">重置</el-button>
    </el-form>
    <div>
        <el-table :data="list" :border="parentBorder" style="width: 100%">
            <el-table-column type="expand">
                <template #default="scope">
                    <div class="count">
                        <div class="left">
                            <p>店铺名称：{{ scope.row.shopName }}</p>
                            <p>店铺地址：{{ scope.row.shopDescription
                                }}</p>

                            <p>店铺名称：{{ scope.row.shopName }}</p>
                        </div>
                        <div class="right">
                            <p>店铺地址: {{ scope.row.shopAddress }}</p>
                            <p>店铺 ID: {{ scope.row.id }}</p>
                            <p>评分: {{ scope.row.shopScore }}</p>
                            <p>分类: {{ scope.row.shopType }}</p>
                        </div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="店铺名称" prop="shopName" />
            <el-table-column label="店铺地址" prop="shopDescription
">
                <template #default="scope">
                    {{ scope.row.shopDescription }}
                </template>
            </el-table-column>
            <el-table-column label="店铺图片" prop="shopImage">
                <template #default="scope">
                    <img style="width: 60px; height: 60px" :src="scope.row.shopImage" alt="">
                </template>
            </el-table-column>
            <el-table-column label="OPtions">
                <template #default="scope">
                    <el-button size="small" @click="handleEdit(scope.row)">
                        Edit
                    </el-button>
                    <el-button size="small" type="danger" @click="handDelent(scope.row.id)">
                        Delete
                    </el-button>
                </template>
            </el-table-column>

        </el-table>
        <el-pagination size="small" layout="prev, pager, next" :total="50" />
        <el-pagination size="small" v-model:current-page="pageCode" v-model:page-size="pageSize" :total="total"
            background layout="prev, pager, next" @change="getList" class="mt-4" />
    </div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import http from "@/utils/http";
const list = ref([])
// const parentBorder = ref(true)
// const childBorder = ref(true)
import { ElMessageBox } from 'element-plus'
//分页
const pageCode = ref(1)
const pageSize = ref(10)
const total = ref(0)
const dialogVisible = ref(false)
const fromData = ref({
    shopName: '',
    shopAddress: '',
    shopDescription: '',
    shopImage: '',
    shopScore: '',
    shopType: ''
})
//重置
const Claer = () => {
    searchData.value.searchValue = ''
    searchData.value.type = ''
    getList()
}
//搜索类型
const typeList = ref(['生鲜', '水果', '冷饮', '甜品', '鲜花', '衣服'])
//搜索对象
const searchData = ref({
    searchValue: '',
    type: ''
})
//表单状态
const tanFlag = ref(true)
//添加弹框
const handAdd = () => {
    dialogVisible.value = true
    tanFlag.value = true
    fromData.value = {
        shopName: '',
        shopAddress: '',
        shopDescription: '',
        shopImage: '',
        shopScore: '',
        shopType: ''
    }
}
//编辑弹框
const handleEdit = (row: any) => {
    fromData.value = row
    dialogVisible.value = true
    tanFlag.value = false
}
const handOk = async () => {
    if (tanFlag.value) {
        await http.put('/api/list', fromData.value)
    } else {
        await http.post('/api/list', fromData.value)
    }
    dialogVisible.value = false
    getList()
}
//删除
const handDelent = async (id: any) => {
    await http.delete('/api/list', { params: { id } })
    getList()
}

const getList = async () => {
    const res = await http.get('/api/list', {
        params: {
            pageCode: pageCode.value,
            pageSize: pageSize.value,
            searchValue: searchData.value.searchValue,
            type: searchData.value.type
        }
    })
    const { data, totalCount } = res.data.data
    console.log(totalCount);
    total.value = totalCount
    list.value = data
}
getList()
</script>
<style>
.count {
    display: flex;
    justify-content: space-around;
}
</style>